<template>
  <van-row class="mobile-history">
    <van-row class="top">
      <van-row class="title">请选择日期范围 </van-row>
      <van-row class="date">
        <van-col span="12">
          <div @click="showStart = true"> {{startDate|formatDate}}</div>
        </van-col>
        <van-col span="12">
          <div @click="showEnd = true"> {{endDate|formatDate}}</div>
        </van-col>
      </van-row>
      <van-row class="btn">
        <van-button type="primary" size="small" :loading="loading" @click="search"> 查 询 </van-button>
      </van-row>
      <van-popup v-model="showStart" position="bottom">
        <van-datetime-picker v-model="startDate" type="date" @confirm="pickerConfirm" @cancel="pickerCancel" />
      </van-popup>
      <van-popup v-model="showEnd" position="bottom">
        <van-datetime-picker v-model="endDate" type="date" @confirm="pickerConfirm" @cancel="pickerCancel" />
      </van-popup>

      <van-row class="list-header">
        <van-col span="7">日期</van-col>
        <van-col span="5">注数</van-col>
        <van-col span="7">下注金额</van-col>
        <van-col span="5">盈亏</van-col>
      </van-row>
    </van-row>

    <van-row class="list">

      <van-row v-for="(item,index) in list" :key="`historyList${index}`" class="row" type="flex" justify="center" align="center">
        <van-col span="7" style="color:green;">
          <van-row> {{item.open_date.substring(0,10)}} </van-row>
          <van-row> {{item.open_date.substring(11)}} </van-row>
        </van-col>
        <van-col span="5"> {{item.count}} </van-col>
        <van-col span="7"> {{item.sum_amount}} </van-col>
        <van-col span="5" style="color:blue;"> {{item.sum_result}} </van-col>
      </van-row>

    </van-row>

    <van-row class="foot">
      <van-col span="7"> 总计: </van-col>
      <van-col span="5"> {{sumThisPage.count}} </van-col>
      <van-col span="7"> {{sumThisPage.amount}} </van-col>
      <van-col span="5"> {{sumThisPage.result}} </van-col>
    </van-row>

  </van-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment' // utils
  import { formatFloat } from '@/utils/index'
  import { Row, Col, Button, DatetimePicker, Popup } from 'vant'

  export default {
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [Button.name]: Button,
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup,
    },

    data() {
      return {
        loading: false,
        showStart: false,
        showEnd: false,
        startDate: new Date(),
        endDate: new Date(),
      }
    },

    computed: {
      ...mapGetters(['memberHistory']),
      list() {
        return this.memberHistory ? Object.values(this.memberHistory) : []
      },
      sumThisPage() {
        const res = {
          count: 0,
          amount: 0,
          result: 0,
        }

        // 求合计
        this.list.map(item => {
          res.count += parseInt(item.count)
          res.amount += parseFloat(item.sum_amount)
          res.result += parseFloat(item.sum_result)
        })

        // 保留2位小数
        for (const key in res) {
          if (res.hasOwnProperty(key)) {
            const element = res[key]
            res[key] = formatFloat(element)
          }
        }
        return res
      },
    },

    // 数据格式化
    filters: {
      formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
    },

    async created() {
      await this.fetchData()
    },

    methods: {
      pickerConfirm() {
        this.showEnd = this.showStart = false
      },
      pickerCancel() {
        this.showEnd = this.showStart = false
      },
      async fetchData() {
        this.loading = true
        await this.$store.dispatch('MemberOrdersHistory', {
          page: this.currentPage,
          startDate: this.startDate,
          endDate: this.startDate,
        })
        this.loading = false
      },
      async search() {
        await this.fetchData()
      },
    },
    watch: {
      startDate(to, from) {
        console.log(to, from)
        console.log(typeof to)
        if (moment(to) > moment(this.endDate)) {
          this.endDate = to
        }
      },
      endDate(to, from) {
        console.log(to, from)
        if (moment(to) < moment(this.startDate)) {
          this.startDate = to
        }
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';
  .mobile-history {
    text-align: center;
    .top {
      background-color: #ffffff;
      font-size: 14px;
      .van-row {
        padding: 4px 0;
      }

      .title {
        font-size: 13px;
        color: gray;
      }

      .date {
        padding: 3px 7%;
        .van-col {
          border: 1px solid $bgc;
          padding: 8px 0;
        }
        .van-col:first-of-type {
          border-right: none;
          border-top-left-radius: 1em;
          border-bottom-left-radius: 1em;
        }
        .van-col:last-of-type {
          border-top-right-radius: 1em;
          border-bottom-right-radius: 1em;
        }
      }

      .btn {
        .van-button {
          width: 85%;
        }
      }

      .list-header {
        background-color: #fff;
        padding: 4px 0;
        border-top: solid 3px $bgc;
      }
    }

    .list {
      height: calc(100vh - 46px - 50px - 37px - 124px); //计算
      overflow: scroll;
      font-size: 12px;
      .row {
        padding: 3px 0;
        background: #fff;
        margin-bottom: 1px;
        .van-col {
          .van-row {
            padding: 2px 0;
          }
        }
      }
    }

    .foot {
      margin-top: 3px;
      padding: 5px 0;
      background-color: #fff;
      font-size: 18px;
    }
  }
</style>